<template>
	<div class="w1024-wrap">
		<div class="page">

			<p class="page-title">查看集团</p>
			<div class="info-block">
				<div class="form-item">
					<p class="form-item-title">集团名称：</p>
					<div class="form-item-content">
						<div class="info-para">{{form.circleoldname}}</div>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">联系人：</p>
					<div class="form-item-content">
						<div class="info-para">{{form.linkman}}</div>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">联系电话：</p>
					<div class="form-item-content">
						<div class="info-para">{{form.linkphone}}</div>
					</div>
				</div>
			</div>
			<div class="info-block">
				<div class="form-item">
					<p class="form-item-title" style="line-height: 40px;">资质：</p>
					<div class="form-item-content">
						<div class="tab-items">
							<p class="tab-item" @click="tab(1)" v-if="objList[0].qualificationstatus!=undefined" :class="tabIndex==1?'selected-item':''">电信</p>
							<p class="tab-item" @click="tab(2)" v-if="objList[1].qualificationstatus!=undefined" :class="tabIndex==2?'selected-item':''">移动</p>
							<p class="tab-item" @click="tab(3)" v-if="objList[2].qualificationstatus!=undefined" :class="tabIndex==3?'selected-item':''">联通</p>
						</div>
						<div style="margin-top: 24px;">
							<div class="qualification-block flex flex-align-center" v-for="(item,index) in qualifications">
								<div class="imgs clear">
									<div class="upload-wrapper left" v-if="item.qualificationurl&&item.qualificationurl.img&&item.qualificationurl.img[0].url">
										<div class="img-wrap">
											<img @click="viewImage(item.qualificationurl.img[0].url)" :src="item.qualificationurl.img[0].url" alt="" />
										</div>
										<p class="img-tip">营业执照</p>
									</div>
									<template v-if="item.acceptmaterial">
										<div class="upload-wrapper left" v-if="item.acceptmaterial&&item.acceptmaterial.img&&item.acceptmaterial.img[0].url" v-for="item2 in item.acceptmaterial.img">
											<div class="img-wrap">	
												<img @click="viewImage(item2.url)" :src="item2.url" alt="" />
											</div>
											<p class="img-tip">受理单</p>
										</div>
									</template>
								</div>
								<p class="update-time">{{item.uploadtime}}</p>
							</div>
							<p v-if="!qualifications.length&&!loading" class="no-img">暂无图片</p>
						</div>
					</div>
				</div>
				<div class="form-item" v-if="objList[tabIndex-1].orderstatus!=undefined">
					<p class="form-item-title">状态：</p>
					<div class="form-item-content">
						<div class="info-para">{{orderstatus===1?'待支付':orderstatus==2?'待审核':orderstatus==3?'审核通过':'审核不通过'}}</div>
					</div>
				</div>
			</div>
			<div class="btn-wrap flex flex-justify-center">
				<el-button size="medium" type="primary" @click="back">返回</el-button>
			</div>
		</div>
		<view-img :src="imgSrc" v-if="showImg" @close="closeImg"></view-img>
	</div>
</template>

<script>
	export default {
		name: 'GroupDetail',
		data() {
			return {
				imgSrc: '',
				showImg: false,
				tabIndex:1,
				id:this.$route.params.id,
				loading:false,
				form: {
				},
				qualificationstatus:'',
				qualifications:[],
				imgs:[],
				promisematerial:'',
				acceptmaterials:[],
				objList:[{},{},{}]
			}
		},

		mounted() {
			this.getGroupDetail()
		},
		methods: {
			getGroupDetail(yys){
				this.loading=true
				this.$request.queryGroupDetail({
					circlecommonuid:this.id,
//					merchant:yys
				})
				.then(res=>{
					this.loading=false
					if(res.code==0){
						if(!yys){
							this.form=res.circledetail[0]?res.circledetail[0]:{}
							for(var i=0;i<(res.circledetail||[]).length;i++){
								this.objList[res.circledetail[i].merchant-1]=res.circledetail[i]
							}
						}
						this.tab(1)
						if(this.objList[0].qualificationstatus==undefined){
							this.tab(2)
						}
						if(this.objList[1].qualificationstatus==undefined){
							this.tab(3)
						}
						
					}else{
						
					}
				})
			},
			tab(index){
				var objList=this.objList
				this.tabIndex=index
				this.qualificationstatus=objList[this.tabIndex-1].qualificationstatus
				this.orderstatus=objList[this.tabIndex-1].orderstatus
				this.imgs=objList[this.tabIndex-1].qualificationurl&&objList[this.tabIndex-1].qualificationurl.img?objList[this.tabIndex-1].qualificationurl.img:[]
				this.promisematerial=objList[this.tabIndex-1].promisematerial
				this.acceptmaterials=objList[this.tabIndex-1].acceptmaterial?objList[this.tabIndex-1].acceptmaterial.img:[]
				this.qualifications=objList[this.tabIndex-1]['qualificationurl'+['dx','yd','lt'][this.tabIndex-1]]||[]
			},
			back() {
				this.$router.go(-1)
			},
		}
	}
</script>

<style scoped lang="scss">
	.w1024-wrap {
		.page{
			padding-left: 20px;
    		padding-right: 20px;
		}
		.page-title {
			height: 78px;
			line-height: 78px;
			color: #333;
			font-size: 18px;
			padding-left: 10px;
			font-weight: bold;
		}
		.info-block {
			border-top: 1px solid #f5f5f5;
			padding-top: 16px;
			.form-item {
				display: block;
				margin-bottom: 8px;
				position: relative;
				.form-item-title {
					font-size: 16px;
					width: 120px;
					font-weight: bold;
					position: absolute;
					left: 0;
					top: 0;
				}
				.form-item-content {
					font-size: 16px;
					width: auto;
					padding-left: 120px;
					.info-para{
						line-height: 32px;
					}
					.no-img{
						color: #999;
						margin-bottom: 20px;
					}
					.tab-items{
						height: 40px;
						.tab-item{
							width: 100px;
							height: 40px;
							line-height: 38px;
							text-align: center;
							color: #333;
							font-size: 16px;
							cursor: pointer;
							margin-right: 20px;
							float: left;
						}
						.selected-item{
							color: #0088EA;
							border-bottom: 2px solid #0088EA;
						}
					}
					.qualification-block{
						width: 800px;
						border: 1px dashed #ddd;
						padding: 8px;
						margin-bottom: 20px;
						&:last-child{
							margin-bottom: 0;
						}
						.imgs{
							width: 600px;
						}
						.update-time{
							color: #666;
							font-size: 14px;
						}
					}
				}
			}
		}
		.btn-wrap {
			padding: 40px 0;
			border-top: 1px solid #f5f5f5;
			.el-button {
				font-size: 16px;
				border-radius: 0;
				margin: 0 40px;
			}
		}
		.upload-wrapper {
			width: 100px;
			margin-right: 20px;
			float: left;
			position: relative;
			.img-wrap{
				width: 100%;
				height: 100px;
				background: #f5f5f5;
				>img {
					width: 100%;
					height: 100px;
					display: block;
				}
			}
			.img-tip{
				text-align: center;
				color: #999;
				line-height: 32px;
			}
		}
	}
</style>